<template>
  <!-- 事件管理 -->
  <div class="table-box" v-loading="loading">
    <div style="width: 100%; margin-bottom: 10px; background: #ffffff; border-radius: 5px">
      <h3 style="padding-left: 12px; margin: 0">技术员工作量</h3>
      <div
        style="
          display: flex;
          justify-content: space-between;
          padding: 10px;
          margin-bottom: 10px;
          background: #ffffff;
          border-radius: 5px;
        "
      >
        <div class="filter-box" @click="getAll">
          <div class="num">{{ countAllRequest }}</div>
          <div class="text">问题总数</div>
        </div>
        <div class="filter-box" @click="getMy">
          <div class="num">{{ countMyRequest }}</div>
          <div class="text">我提出的问题</div>
        </div>
        <div class="filter-box" @click="getserchNo">
          <div class="num">{{ countMyPeRequest }}</div>
          <div class="text">指派我组的的问题</div>
        </div>
        <div class="filter-box" @click="getUnHandle">
          <div class="num">{{ myUnHandle }}</div>
          <div class="text">我的待处理</div>
        </div>
        <!-- <div class="filter-box">
          <div class="num">{{ myPassChange }}</div>
          <div class="text">我的未批准变更</div>
        </div> -->
        <!-- <div class="countBox">
          <p @click="getRequest('all')" style="margin: 0; line-height: 25px">
            所有的请求<span>[{{ countAllRequest }}]</span>
          </p>
          <p @click="getRequest('myProposedRequest')" style="margin: 0; line-height: 25px">
            我提出的请求<span>[{{ countMyRequest }}]</span>
          </p>
          <p @click="getRequest('assigneeToMyRequest')" style="margin: 0; line-height: 25px">
            指派给我的请求<span>[{{ countMyPeRequest }}]</span>
          </p>
        </div> -->
        <!-- <div class="statusBox" style="width: 30%">
          <el-progress
            v-for="item in workStatusList"
            :key="item.id"
            :percentage="Number(((item.data / item.total) * 100).toFixed(2))"
            :stroke-width="15"
          >
            <el-button text @click="getRequestById(item.id, item.label)">
              {{ item.label === "unknown" ? "未知" : item.label }}
              ({{ Number(((item.data / item.total) * 100).toFixed(2)) }}%)
            </el-button>
          </el-progress>
        </div> -->
        <!-- <div class="priorityBox" style="width: 30%">
          <el-progress
            v-for="item in workPriorityList"
            :key="item.id"
            :percentage="Number(((item.data / item.total) * 100).toFixed(2))"
            :stroke-width="15"
          >
            <el-button text @click="getRequestByPriorityId(item.id, item.label)">
              {{ item.label === "unknown" ? "未知" : item.label }}
              ({{ Number(((item.data / item.total) * 100).toFixed(2)) }}%)
            </el-button>
          </el-progress>
        </div> -->
      </div>
    </div>
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback" row-key="eno">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <div style="display: flex">
          <el-button type="primary" v-auth="'add'" plain @click="addEvent">新增</el-button>
          <el-button
            type="danger"
            v-auth="'delete'"
            :disabled="!scope.isSelected"
            plain
            @click="delSelectItem(scope.selectedList)"
          >
            删除
          </el-button>
          <el-button type="primary" plain @click="searchVisible = true">搜索</el-button>
          <!-- <el-button type="primary" plain>编辑</el-button> -->
          <!-- <el-button type="primary" plain>高级搜索</el-button> -->
          <el-button
            type="primary"
            v-auth="'batchClose'"
            plain
            :disabled="!scope.isSelected"
            @click="showBatchCloseMask(scope.selectedList)"
          >
            <span>批量处理</span>
          </el-button>
          <div style="margin: 0 12px" v-auth="'filter'">
            <el-select style="width: 160px" type="primary" v-model="filterId" placeholder="请选择过滤器">
              <el-option v-for="item in customFilterList" :key="item.filterId" :label="item.filterName" :value="item.filterId" />
            </el-select>
          </div>
          <el-button @click="showSetFilterMask" v-auth="'filter'">过滤器设置</el-button>
        </div>
        <!-- <div style="padding: 0 10px; background-color: #ffffff">
          <el-tabs v-model="tabName">
            <el-tab-pane :label="'我提出的请求（' + countData.countMyRquest + '）'" name="one"></el-tab-pane>
            <el-tab-pane :label="'正在处理的请求（' + countData.countMyPeRquest + '）'" name="two"></el-tab-pane>
            <el-tab-pane :label="'指派给我的请求（' + countData.countMyIngHandleRequest + '）'" name="three"></el-tab-pane>
          </el-tabs>
        </div> -->
      </template>
      <!-- 紧急度 -->
      <template #seriousnessName="scope">
        <div v-if="scope.row.seriousnessColor" :style="{ background: scope.row.seriousnessColor }" style="color: #ffffff">
          {{ scope.row.seriousnessName }}
        </div>
        <div v-else>{{ scope.row.seriousnessName }}</div>
      </template>
      <template #effectRangeName="scope">
        <div v-if="scope.row.effectRangeColor" :style="{ background: scope.row.effectRangeColor }" style="color: #ffffff">
          {{ scope.row.effectRangeName }}
        </div>
        <div v-else>{{ scope.row.effectRangeName }}</div>
      </template>
      <template #priorityName="scope">
        <div v-if="scope.row.priorityColor" :style="{ background: scope.row.priorityColor }" style="color: #ffffff">
          {{ scope.row.priorityName }}
        </div>
        <div v-else>{{ scope.row.priorityName }}</div>
      </template>
      <!-- 状态 -->
      <template #statusName="scope">
        <div v-if="scope.row.statusColor" :style="{ background: scope.row.statusColor }" style="color: #ffffff">
          {{ scope.row.statusName }}
        </div>
        <div v-else>{{ scope.row.statusName }}</div>
      </template>
      <!-- SLA响应 -->
      <template #respontime="scope">
        <div v-if="scope.row && scope.row.respontime">
          <el-button type="success" text v-if="scope.row.respontime.indexOf('正常') === 0">
            {{ scope.row.respontime
            }}<el-icon class="el-icon--right">
              <SuccessFilled />
            </el-icon>
          </el-button>
          <el-button type="warning" text v-else-if="scope.row.respontime.indexOf('超时') === 0">
            {{ scope.row.respontime
            }}<el-icon class="el-icon--right">
              <SuccessFilled />
            </el-icon>
          </el-button>
          <el-button type="danger" text v-else>{{ scope.row.respontime }}</el-button>
        </div>
      </template>
      <!-- SLA 完成 -->
      <template #closetime="scope">
        <div v-if="scope.row && scope.row.closetime">
          <el-button type="success" text v-if="scope.row.closetime.indexOf('正常') === 0">
            {{ scope.row.closetime
            }}<el-icon class="el-icon--right">
              <SuccessFilled />
            </el-icon>
          </el-button>
          <el-button type="warning" text v-else-if="scope.row.closetime.indexOf('超时') === 0">
            {{ scope.row.closetime
            }}<el-icon class="el-icon--right">
              <SuccessFilled />
            </el-icon>
          </el-button>
          <el-button type="danger" text v-else>{{ scope.row.closetime }}</el-button>
        </div>
      </template>

      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link v-auth="'view'" :icon="View" @click="seeDetails(scope.row)">查看</el-button>
        <el-button type="primary" link v-auth="'edit'" :icon="EditPen" @click="editEvent(scope.row)">编辑</el-button>
        <el-button type="primary" link v-auth="'delete'" :icon="Delete" @click="deleteItem(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <!-- 搜索弹窗 -->
    <el-dialog v-model="searchVisible" title="搜索" width="880">
      <div style="padding-right: 40px">
        <el-form label-width="115">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="所属客户">
                <el-select v-model="filterForm.companyNo" clearable>
                  <el-option v-for="(item, index) in orgList" :key="index" :label="item.orgName" :value="item.orgNo"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="请求人所在机构">
                <div style="display: flex; width: 100%">
                  <el-input
                    style="flex: 1; overflow: hidden"
                    v-model="requestorOrgName"
                    placeholder="请选择所在机构"
                    :readonly="true"
                    clearable
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    :icon="Search"
                    @click="selectDepartment('filterForm.requestorOrgNo', '请选择所在机构')"
                  ></el-button>
                </div>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="标题">
                <el-input v-model="filterForm.etitle" placeholder="请输入标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编号">
                <el-input v-model="filterForm.requestCode" placeholder="请输入编号"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="分类">
                <el-tree-select
                  v-model="filterForm.ecategoryNo"
                  lazy
                  :load="cateTreeLoad"
                  check-strictly
                  :render-after-expand="false"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-select v-model="filterForm.statusNo" clearable>
                  <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="来源">
                <el-select v-model="filterForm.imodeNo" clearable>
                  <el-option v-for="item in imodeList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="优先级">
                <el-select v-model="filterForm.priorityNo" clearable>
                  <el-option v-for="item in priorityList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="复杂度">
                <el-select v-model="filterForm.levelNo" clearable>
                  <el-option v-for="item in levelList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="影响">
                <el-select v-model="filterForm.effectRangeNo" clearable>
                  <el-option v-for="item in effectRangeList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急度">
                <el-select v-model="filterForm.seriousnessNo" clearable>
                  <el-option v-for="item in seriousnessList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="SLA状态">
                <el-select v-model="filterForm.slaStateNo" clearable>
                  <el-option v-for="item in slaStatusList" :key="item.id" :label="item.label" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="位置">
                <el-tree-select
                  v-model="filterForm.locationNos"
                  :data="positionList"
                  check-strictly
                  :render-after-expand="false"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求人">
                <div style="display: flex; width: 100%">
                  <el-input
                    style="flex: 1; overflow: hidden"
                    v-model="filterForm.createdByFullName"
                    placeholder="请输入请求人名称"
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    :icon="Search"
                    @click="selectUser('createdByFullName')"
                  ></el-button>
                </div>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="指派组">
                <div style="display: flex; width: 100%">
                  <el-input
                    style="flex: 1; overflow: hidden"
                    v-model="assigneeGroupName"
                    placeholder="请选择指派组"
                    :readonly="true"
                    clearable
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    :icon="Search"
                    @click="selectDepartment('filterForm.assigneeGroupNo', '请选择指派组')"
                  ></el-button>
                </div>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="负责人">
                <div style="display: flex; width: 100%">
                  <el-input
                    style="flex: 1; overflow: hidden"
                    v-model="filterForm.ownerFullName"
                    placeholder="请输入负责人名称"
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    :icon="Search"
                    @click="selectUser('ownerFullName')"
                  ></el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务目录">
                <el-cascader
                  v-model="filterForm.serviceDirIds"
                  :options="serviceList"
                  :props="serviceProps"
                  clearable
                  style="width: 100%"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="技术员">
                <div style="display: flex; width: 100%">
                  <el-input
                    style="flex: 1; overflow: hidden"
                    v-model="filterForm.assigneeFullName"
                    placeholder="请输入技术员名称"
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    :icon="Search"
                    @click="selectUser('assigneeFullName')"
                  ></el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="日期时间范围">
                <el-date-picker
                  v-model="dateTimeRange"
                  type="datetimerange"
                  range-separator="到"
                  start-placeholder="开始日期时间"
                  end-placeholder="结束日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="clearSearchData">重置</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 过滤器设置 -->
    <el-dialog :title="setFilterForm.filterId ? '编辑过滤器' : '新增过滤器'" v-model="setFilterMask" width="1000">
      <div v-loading="setFilterLoading">
        <el-form label-width="85">
          <el-form-item label="过滤器">
            <el-select v-model="setFilterForm.filterId" clearable style="width: 42%" @change="editFilterChange">
              <el-option v-for="item in myFiltersList" :key="item.filterId" :label="item.filterName" :value="item.filterId" />
            </el-select>
            <span style="flex: 1; margin-left: 12px; overflow: hidden">提示：不选择则新增过滤器</span>
            <el-button type="danger" plain :icon="Delete" v-if="setFilterForm.filterId" @click="delFilter">删除过滤器</el-button>
          </el-form-item>
          <div style="margin-bottom: 15px; font-weight: bold">过滤器基本信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="过滤器名称">
                <el-input v-model="setFilterForm.filterName" placeholder="请输入过滤器名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否共享">
                <el-select v-model="setFilterForm.share">
                  <el-option label="私有" value="private" />
                  <el-option label="共享" value="share" />
                  <el-option label="共享到组" value="sharegroup" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="过滤器描述">
            <el-input v-model="setFilterForm.filterDesc" placeholder="请输入过滤器描述" />
          </el-form-item>
          <!-- 条件列表 -->
          <div style="margin-bottom: 15px; font-weight: bold">条件列表</div>
          <div class="table-data-box" style="margin: 0">
            <div class="data-cell row">
              <span class="label flex-2">字段名称</span>
              <span class="label flex-2">查询方式</span>
              <span class="label flex-2">值</span>
              <span class="label flex-2">连接方式</span>
              <span class="label flex-3">操作</span>
            </div>
          </div>
          <el-scrollbar max-height="280px">
            <div class="table-data-box">
              <div class="data-cell row text-center" v-for="(item, index) in setFilterForm.expressions" :key="index">
                <!-- 字段名称 -->
                <div class="content flex-2">{{ formartName(item.propName) }}</div>
                <!-- 查询方式 -->
                <div class="content flex-2">{{ checkWayText(item.operator) }}</div>
                <!-- 值 -->
                <div class="content flex-2">{{ item.propDisplayValue }}</div>
                <!-- 连接方式 -->
                <div class="content flex-2">
                  <el-radio-group v-model="item.joinType" size="small">
                    <el-radio-button v-for="(vo, idx) in connectList" :key="idx" :label="vo.label" :value="vo.value" />
                  </el-radio-group>
                </div>
                <!-- 操作 -->
                <div class="content flex-3">
                  <el-button type="danger" plain size="small" style="margin-bottom: 0" @click="delConnectItem(index)">
                    删除
                  </el-button>
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    :disabled="index == 0"
                    style="margin-bottom: 0"
                    @click="connectItemMoveUp(index)"
                  >
                    上移
                  </el-button>
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    :disabled="index + 1 >= setFilterForm.expressions.length"
                    @click="connectItemMoveDown(index)"
                  >
                    下移
                  </el-button>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <!-- 增加条件 -->
          <div style="margin: 15px 0; font-weight: bold">增加条件</div>
          <div class="table-data-box" style="margin-bottom: 0">
            <div class="data-cell row">
              <span class="label flex-3">字段名称</span>
              <span class="label flex-2">查询方式</span>
              <span class="label flex-3">值</span>
              <span class="label flex-2">连接方式</span>
              <span class="label flex-2">操作</span>
            </div>
            <div class="data-cell row">
              <!-- 字段名称 -->
              <div class="content flex-3">
                <el-select v-model="conditionForm.propName" placeholder="请选择" style="width: 100%" @change="propNameChange">
                  <el-option v-for="item in nameList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <!-- 查询方式 -->
              <div class="content flex-2">
                <el-select v-model="conditionForm.operator" placeholder="请选择" style="width: 100%">
                  <template v-if="valueWay == 'way1'">
                    <el-option v-for="item in way1List" :key="item.value" :label="item.label" :value="item.value" />
                  </template>
                  <template v-if="valueWay == 'way2'">
                    <el-option v-for="item in way2List" :key="item.value" :label="item.label" :value="item.value" />
                  </template>
                  <template v-if="valueWay == 'way3'">
                    <el-option v-for="item in way3List" :key="item.value" :label="item.label" :value="item.value" />
                  </template>
                  <template v-if="valueWay == 'way4'">
                    <el-option v-for="item in way4List" :key="item.value" :label="item.label" :value="item.value" />
                  </template>
                </el-select>
              </div>
              <div class="content flex-3">
                <!-- 输入框 -->
                <el-input
                  v-if="valueType == 'input-string'"
                  v-model="conditionForm.propValue"
                  @change="inputChange"
                  placeholder="请输入"
                />
                <!-- 选择所属客户-->
                <el-select v-if="valueType == 'select-companyNo'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="(item, index) in orgList" :key="index" :label="item.orgName" :value="item.orgNo"></el-option>
                </el-select>
                <!-- 分类 -->
                <el-tree-select
                  v-if="valueType == 'select-requestCategory'"
                  v-model="conditionForm.propValue"
                  lazy
                  :load="cateTreeLoad"
                  check-strictly
                  :render-after-expand="false"
                  clearable
                  @change="cateTreeChange"
                />
                <!-- sla状态 -->
                <el-select v-if="valueType == 'select-slaState'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="item in slaStatusList" :key="item.id" :label="item.label" :value="item.id" />
                </el-select>
                <!-- 状态 -->
                <el-select v-if="valueType == 'select-status'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.id"></el-option>
                </el-select>
                <!-- 来源 -->
                <el-select v-if="valueType == 'select-imode'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="item in imodeList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
                <!-- 复杂度 -->
                <el-select v-if="valueType == 'select-level'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="item in levelList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
                <!-- 优先级 -->
                <el-select v-if="valueType == 'select-priority'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="item in priorityList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
                <!-- 紧急度 -->
                <el-select v-if="valueType == 'select-seriousness'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="item in seriousnessList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
                <!-- 影响 -->
                <el-select v-if="valueType == 'select-effectRange'" v-model="conditionForm.propValue" @change="selectChange">
                  <el-option v-for="item in effectRangeList" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
                <!-- 请求人、指派到技术员、组长 -->
                <div class="flex-row" v-if="valueType == 'select-user'">
                  <el-input
                    style="flex: 1; overflow: hidden"
                    v-model="conditionForm.propDisplayValue"
                    placeholder="请输入名称"
                  ></el-input>
                  <el-button style="margin-left: 10px" type="primary" :icon="Search" @click="selectUser('propValue')"></el-button>
                </div>
                <!-- 请求人所在机构、指派到组 -->
                <div class="flex-row" v-if="valueType == 'select-orgNo'">
                  <el-input
                    style="flex: 1; overflow: hidden"
                    v-model="conditionForm.propDisplayValue"
                    placeholder="请选择"
                    :readonly="true"
                    clearable
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    :icon="Search"
                    @click="selectDepartment('conditionForm.propValue', '请选择')"
                  ></el-button>
                </div>
                <!-- 创建时间/完成时间 -->
                <el-date-picker
                  v-if="valueType == 'select-time'"
                  v-model="conditionForm.propValue"
                  type="datetime"
                  placeholder="请选择时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  @change="dateChange"
                />
                <!-- 服务目录 -->
                <el-cascader
                  v-if="valueType == 'select-serviceDirectory'"
                  v-model="conditionForm.propValue"
                  :options="serviceList"
                  :props="serviceProps"
                  style="width: 100%"
                  @change="serviceDirectoryChange"
                />
                <!-- 位置 -->
                <el-tree-select
                  v-if="valueType == 'select-location'"
                  v-model="conditionForm.propValue"
                  :data="positionList"
                  check-strictly
                  :render-after-expand="false"
                  @change="conditionFormLocChange"
                />
              </div>
              <!-- 连接方式 -->
              <div class="content flex-2 text-center">
                <el-radio-group v-model="conditionForm.joinType">
                  <el-radio-button v-for="(vo, idx) in connectList" :key="idx" :label="vo.label" :value="vo.value" />
                </el-radio-group>
              </div>
              <!-- 操作 -->
              <div class="content flex-2 text-center">
                <el-button type="primary" @click="addQueryCriteria">添加</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="setFilterMask = false">取消</el-button>
          <el-button type="primary" @click="setFilterFormSubmit">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 选择部门 -->
    <SelectDepartment ref="selectDepartmentMask" :title="selectDepartmentTitle" @change="departmentChange"></SelectDepartment>
    <!-- 添加弹窗 -->
    <AddEventMask ref="addEventMask" @add="refreshList(true)" @change="refreshList(false)"></AddEventMask>
    <!-- 详情弹窗 -->
    <DetailsMask ref="detailsMask" @change="refreshList(true)"></DetailsMask>
    <!-- 批量操作 -->
    <el-dialog v-model="batchCloseVisible" title="批量操作" width="500">
      <el-form>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="batchCloseForm.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="batchCloseVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRequestBatchClose">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 选择用户弹窗 -->
    <SelectUserMask ref="selectUserMask" @change="selectUserChange"></SelectUserMask>
    <!-- 问题详情 -->
    <ProblemDetailsMask ref="problemDetailsMask"></ProblemDetailsMask>
  </div>
</template>

<script setup lang="ts" name="eventManagement">
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import type { CascaderValue } from "element-plus";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { User } from "@/api/interface";
import { Delete, EditPen, View, Search } from "@element-plus/icons-vue";

import ProTable from "@/components/ProTable/index.vue";
import AddEventMask from "./components/AddEventMask.vue";
import DetailsMask from "@/components/Event/DetailsMask.vue";
import SelectUserMask from "@/components/SelectUserMask/index.vue";
import SelectDepartment from "@/components/SelectDepartment/SelectDepartment.vue";
import { useTabsStore } from "@/stores/modules/tabs";
import {
  findRequests,
  findPagerRequestByCustomFilter,
  deleteRequests,
  findCustomFilter,
  findMyFilters,
  findFilterById,
  filterUpdate,
  saveFilter,
  deleteFilter,
  requestBatchClose,
  getCategoryTreeClient,
  findCountRequest,
  findRequestFlotPieData
} from "@/api/modules/eventManagement";
import { countProblem, findProblemPager, deleteProblem } from "@/api/modules/problemManagement";
import { getCategoryTree } from "@/api/modules/common";

import { useUserStore } from "@/stores/modules/user";
import { requestAllOptions } from "@/stores/modules/event";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { getCurrentLoginUser } from "@/api/modules/accessController";

import ProblemDetailsMask from "@/components/Problem/DetailsMask.vue";
const { BUTTONS } = useAuthButtons();
const tabStore = useTabsStore();
const userStore = useUserStore();
const allOptions = requestAllOptions();

const router = useRouter();
const route = useRoute();
const problemDetailsMask = ref();
const tabName = ref("one");
//技术员工作量
const countAllRequest = ref(0);
const countMyRequest = ref(0);
const countMyPeRequest = ref(0);

const myUnHandle = ref(0);
const requestClose = ref(0);
const workStatusList = ref<any>([]);
const workPriorityList = ref<any>([]);
const getFindCountRequest = async () => {
  const params = {
    "queryDTO.userName": userStore.username
  };
  const res = (await countProblem(params)) as any;
  countAllRequest.value = res.countAllProblem;
  countMyRequest.value = res.countMyProblem;
  countMyPeRequest.value = res.countMyPeProblem;
  myUnHandle.value = res.countMyPeProblem;
};
const getFindRequestFlotPieData_status = async () => {
  const params = {
    "requestQueryDTO.countQueryType": "all",
    "requestQueryDTO.groupField": "status",
    "requestQueryDTO.loginName": userStore.username
  };
  try {
    const data = (await findRequestFlotPieData(params, Date.now())) as any;
    workStatusList.value = data;
    data.forEach((item: any) => {
      if (item.label === "请求关闭") {
        requestClose.value = item.data;
      }
    });
  } catch (error) {
    console.error("请求失败:", error);
  }
};
const getFindRequestFlotPieData_priority = async () => {
  const params = {
    "requestQueryDTO.countQueryType": "all",
    "requestQueryDTO.groupField": "priority",
    "requestQueryDTO.loginName": userStore.username
  };
  try {
    const data = (await findRequestFlotPieData(params, Date.now() + 1)) as any;
    workPriorityList.value = data;
  } catch (error) {
    console.error("请求失败:", error);
  }
};
const isType = ref(false);
const requestType = ref("");

const getAll = () => {
  clearSearchData();
  refreshList(true);
};
const serchMy = ref(false);
const getMy = () => {
  clearSearchData();
  serchMy.value = true;
  refreshList(true);
};
const serchNo = ref(false);
const getserchNo = () => {
  clearSearchData();
  serchNo.value = true;
  refreshList(true);
};
const unHandle = ref(false);
const getUnHandle = () => {
  clearSearchData();
  unHandle.value = true;
  refreshList(true);
};

const getRequest = (type: string) => {
  isType.value = true;
  requestType.value = type;
  isStatus.value = false;
  isPriority.value = false;
  refreshList(true);
};
const isStatus = ref(false);
const statusId = ref(0);
const statusLabel = ref("");
const getRequestById = async (id: number, label: string) => {
  isStatus.value = true;
  statusId.value = id;
  statusLabel.value = label;
  isType.value = false;
  isPriority.value = false;
  refreshList(true);
};
const isPriority = ref(false);
const priorityId = ref(0);
const priorityLabel = ref("");
const getRequestByPriorityId = (id: number, label: string) => {
  isPriority.value = true;
  priorityId.value = id;
  priorityLabel.value = label;
  isType.value = false;
  isStatus.value = false;
  refreshList(true);
};
// 所属客户列表
const orgList = computed(() => {
  let list = JSON.parse(JSON.stringify(allOptions.orgList));
  let companyNo = userStore.userInfo.companyNo;
  let hasItem = false;
  list.forEach((item: any) => {
    if (item.orgNo === companyNo) {
      hasItem = true;
    }
  });
  if (!hasItem) {
    list.push({
      orgName: userStore.userInfo.companyName,
      orgNo: userStore.userInfo.companyNo
    });
  }
  return list;
});

interface UniversalItem {
  id: number;
  label: string;
  cname: string;
  dname: string;
  dcode: string;
}

// 分类列表
const cateList = computed<any[]>(() => {
  let list = JSON.parse(JSON.stringify(allOptions.cateList));
  list.forEach((item: any) => {
    item.label = item.attr.cname;
    item.value = item.attr.id;
    if (item.children && item.children.length > 0) {
      item.children.forEach((vo: any) => {
        vo.label = vo.attr.cname;
        vo.value = vo.attr.id;
      });
    }
  });
  return list;
});

const cateTreeLoad = (node, resolve) => {
  if (node.level == 0) {
    resolve(cateList.value);
  } else {
    // 获取分类列表
    getCategoryTreeClient({
      types: "request",
      parentEventId: node.data.value
    }).then((res: any) => {
      res.forEach(item => {
        item.label = item.attr.cname;
        item.value = item.attr.id;
      });
      resolve(res);
    });
  }
};

// 状态列表
const statusList = computed<UniversalItem[]>(() => {
  return allOptions.statusList;
});

// 来源列表
const imodeList = computed<UniversalItem[]>(() => {
  return allOptions.imodeList;
});

// 优先级列表
const priorityList = computed<UniversalItem[]>(() => {
  return allOptions.priorityList;
});

// 影响列表
const effectRangeList = computed<UniversalItem[]>(() => {
  return allOptions.effectRangeList;
});

// 复杂度表
const levelList = computed<UniversalItem[]>(() => {
  return allOptions.levelList;
});

// 紧急度列表
const seriousnessList = computed<UniversalItem[]>(() => {
  return allOptions.seriousnessList;
});

// SLA状态列表
const slaStatusList = computed<UniversalItem[]>(() => {
  return allOptions.slaStatusList;
});

// 服务目录
const serviceList = computed(() => {
  return allOptions.serviceList;
});

const serviceProps = reactive({
  checkStrictly: true,
  label: "cname",
  value: "id",
  lazy: true,
  lazyLoad(node: { value: any }, resolve: (arg0: any) => void) {
    getCategoryTree({
      types: "Service",
      parentEventId: node.value,
      num: 0,
      _: new Date().getTime()
    }).then((res: any) => {
      resolve(
        res.map((item: { attr: any }) => {
          return item.attr;
        })
      );
    });
  }
});

// 位置列表
const positionList = computed(() => {
  let list: any[] = JSON.parse(JSON.stringify(allOptions.positionList));
  list.forEach((item: any) => {
    item.label = item.attr.cname;
    item.value = item.attr.id;
    if (item.children.length > 0) {
      item.children.forEach((vo: any) => {
        vo.label = vo.attr.cname;
        vo.value = vo.attr.id;
      });
    }
  });
  return list;
});

// 添加事件
const addEventMask = ref();
const addEvent = () => {
  //前往添加页面
  tabStore.removeTabs(route.fullPath);
  router.push(`/problemManagement/addProblem?pageNo=${Math.random().toFixed(3)}&id=111`);
};

// 编辑事件
const editEvent = (item: { eno: any }) => {
  //编辑页面
  tabStore.removeTabs(route.fullPath);
  router.push(`/problemManagement/editProblem?pageNo=${Math.random().toFixed(3)}&id=` + item.eno);
};

// 查看详情
const detailsMask = ref();
const seeDetails = (item: { eno: any }) => {
  problemDetailsMask.value?.open(item);
};

interface ListItem {
  eno: number;
  requestCode: string;
  companyName: string;
  etitle: string;
  createdByName: string;
  requestCategoryName: string;
  technicianName: string;
  seriousnessName: string;
  statusName: string;
  createdOn: string;
  respontime: string;
  closetime: string;
}
interface resList {
  eno: string;
  companyName: string;
  problemNo: string;
  etitle: string;
  categoryName: string;
  assignName: string;
  assignGroupName: string;
  priorityName: string;
  effectRangeName: string;
  seriousnessName: string;
  createdByName: string;
  createdOn: string;
  statusName: string;
}

// 表格配置项
const columns = reactive<ColumnProps<resList>[]>([
  { type: "selection", fixed: "left", width: 60 },
  { prop: "eno", fixed: "ID", width: 60 },
  { prop: "companyName", label: "所属客户", fixed: "left", width: 160 },
  { prop: "problemNo", label: "问题编码", width: 160 },
  { prop: "etitle", label: "标题", width: 160 },
  { prop: "categoryName", label: "分类", width: 110 },
  { prop: "assignName", label: "指派给", width: 110 },
  { prop: "assignGroupName", label: "指派组", width: 110 },
  { prop: "priorityName", label: "优先级", width: 80 },
  { prop: "effectRangeName", label: "影响", width: 110 },
  { prop: "seriousnessName", label: "紧急度", width: 170 },
  { prop: "createdByName", label: "报告人", width: 130 },
  { prop: "createdOn", label: "报告时间", width: 130 },
  { prop: "statusName", label: "状态", width: 130 },
  { prop: "operation", label: "操作", fixed: "right", width: 230 }
]);

// ProTable 实例
const proTable = ref<ProTableInstance>();
const loading = ref(false);
const isRefresh = ref(false);

interface FormItem {
  companyNo: number | string;
  requestorOrgNo: number | string;
  etitle: string;
  requestCode: string;
  ecategoryNo: number | string;
  statusNo: number | string;
  imodeNo: number | string;
  priorityNo: number | string;
  effectRangeNo: number | string;
  levelNo: number | string;
  seriousnessNo: number | string;
  locationNos: number | string;
  slaStateNo: number | string;
  createdByFullName: string;
  assigneeGroupNo: number | string;
  ownerFullName: string;
  assigneeFullName: string;
  serviceDirIds: string;
  startTime: string;
  endTime: string;
}

const filterForm = reactive<FormItem>({
  companyNo: "", // 所属客户
  requestorOrgNo: "", // 所属机构
  etitle: "", // 标题
  requestCode: "", // 编号
  ecategoryNo: "", // 分类
  statusNo: "", // 状态
  imodeNo: "", // 来源
  priorityNo: "", // 优先级
  effectRangeNo: "", // 影响
  levelNo: "", // 复杂度
  seriousnessNo: "", // 紧急度
  locationNos: "", // 位置
  slaStateNo: "", // SLA状态
  createdByFullName: "", // 申请人
  assigneeGroupNo: "", // 指派组
  ownerFullName: "", // 负责人
  assigneeFullName: "", // 技术员
  serviceDirIds: "", // 服务目录
  startTime: "", // 开始日期时间
  endTime: "" // 结束日期时间
});

const requestorOrgName = ref("");
const assigneeGroupName = ref("");
const dateTimeRange = ref<any>([]);

watch(
  () => dateTimeRange.value,
  val => {
    if (val.length == 2) {
      filterForm.startTime = val[0];
      filterForm.endTime = val[1];
    } else {
      filterForm.startTime = "";
      filterForm.endTime = "";
    }
  }
);

const form = reactive<FormItem>({
  companyNo: "", // 所属客户
  requestorOrgNo: "", // 所属机构
  etitle: "", // 标题
  requestCode: "", // 编号
  ecategoryNo: "", // 分类
  statusNo: "", // 状态
  imodeNo: "", // 来源
  priorityNo: "", // 优先级
  effectRangeNo: "", // 影响
  levelNo: "", // 复杂度
  seriousnessNo: "", // 紧急度
  locationNos: "", // 位置
  slaStateNo: "", // SLA状态
  createdByFullName: "", // 申请人
  assigneeGroupNo: "", // 指派组
  ownerFullName: "", // 负责人
  assigneeFullName: "", // 技术员
  serviceDirIds: "", // 服务目录
  startTime: "", // 开始日期时间
  endTime: "" // 结束日期时间
});

// 过滤器列表
const customFilterList = ref<any[]>([]);
const filterId = ref("");
// 获取过滤器列表
const getFindCustomFilter = () => {
  findCustomFilter(userStore.username).then((res: any) => {
    let list = res || [];
    customFilterList.value = [
      {
        filterId: "",
        filterName: "全部"
      },
      ...list
    ];
  });
};
getFindCustomFilter();
const isFilter = ref(false);
// 监听选择过滤器
watch(
  () => filterId.value,
  val => {
    isFilter.value = val ? true : false;
    refreshList(true);
  }
);

// 设置过滤器
const setFilterMask = ref(false);
const myFiltersList = ref<any>([]);
// 获取我编辑的过滤器列表
const getMyFiltersList = () => {
  findMyFilters(userStore.username).then((res: any) => {
    let list = res || [];
    if (list.length > 0) {
      myFiltersList.value = [
        {
          filterId: "",
          filterName: "不选择过滤器"
        },
        ...list
      ];
    }
  });
};
const showSetFilterMask = () => {
  setFilterMask.value = true;
  getMyFiltersList();
};
const setFilterLoading = ref(false);

interface conditionFormItem {
  displayOperator: string;
  propDisplayName: string;
  propType: string;
  propName: string;
  operator: string;
  propValue: string | number;
  propDisplayValue: string;
  joinType: string;
}
interface setFilterFormItem {
  filterId: string | number;
  filterName: string;
  filterDesc: string;
  share: string;
  expressions: conditionFormItem[];
}
const setFilterForm = reactive<setFilterFormItem>({
  filterId: "",
  filterName: "",
  filterDesc: "",
  share: "",
  expressions: []
});
const conditionForm = reactive<conditionFormItem>({
  displayOperator: "",
  propDisplayName: "",
  propType: "",
  propName: "", // 字段名称
  operator: "", // 查询方式
  propValue: "",
  propDisplayValue: "", // 值
  joinType: "or"
});
const conditionFormLocChange = e => {
  let data = findEmployeeById(positionList.value, e);
  conditionForm.propDisplayValue = data.label;
};
const nameList = reactive([
  {
    label: "所属客户",
    value: "companyNo",
    type: "select-companyNo",
    way: "way1",
    formData: {
      displayOperator: "label_sla_matches",
      propDisplayName: "label_belongs_client",
      propName: "companyNo",
      propType: "Long"
    }
  },
  {
    label: "编号",
    value: "requestCode",
    type: "input-string",
    way: "way2",
    formData: {
      displayOperator: "label_sla_matches",
      propDisplayName: "number",
      propName: "requestCode",
      propType: "String"
    }
  },
  {
    label: "标题",
    value: "etitle",
    type: "input-string",
    way: "way2",
    formData: {
      displayOperator: "label_sla_matches",
      propDisplayName: "common_title",
      propName: "etitle",
      propType: "String"
    }
  },
  {
    label: "分类",
    value: "requestCategory.eventId",
    type: "select-requestCategory",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "category",
      propName: "requestCategory.eventId",
      propType: "Long"
    }
  },
  {
    label: "SLA状态",
    value: "slaState.dcode",
    type: "select-slaState",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "title_request_SLAState",
      propName: "slaState.dcode",
      propType: "Long"
    }
  },
  {
    label: "状态",
    value: "status.dcode",
    type: "select-status",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "common_state",
      propName: "status.dcode",
      propType: "Long"
    }
  },
  {
    label: "来源",
    value: "imode.dcode",
    type: "select-imode",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "label_sla_imode",
      propName: "imode.dcode",
      propType: "Long"
    }
  },
  {
    label: "复杂度",
    value: "level.dcode",
    type: "select-level",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "label_sla_level",
      propName: "level.dcode",
      propType: "Long"
    }
  },
  {
    label: "优先级",
    value: "priority.dcode",
    type: "select-priority",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "priority",
      propName: "priority.dcode",
      propType: "Long"
    }
  },
  {
    label: "紧急度",
    value: "seriousness.dcode",
    type: "select-seriousness",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "label_sla_seriousness",
      propName: "seriousness.dcode",
      propType: "Long"
    }
  },
  {
    label: "影响范围",
    value: "effectRange.dcode",
    type: "select-effectRange",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "label_sla_effectRange",
      propName: "effectRange.dcode",
      propType: "Long"
    }
  },
  {
    label: "请求人",
    value: "createdBy.loginName",
    type: "select-user",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "requester",
      propName: "createdBy.loginName",
      propType: "String"
    }
  },
  {
    label: "请求人所在机构",
    value: "createdBy.orgnization.orgNo",
    type: "select-orgNo",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "title_requester_group",
      propName: "createdBy.orgnization.orgNo",
      propType: "Long"
    }
  },
  {
    label: "指派到组",
    value: "assigneeGroup.orgNo",
    type: "select-orgNo",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "title_request_assignToGroup",
      propName: "assigneeGroup.orgNo",
      propType: "Long"
    }
  },
  {
    label: "指派到技术员",
    value: "technician.loginName",
    type: "select-user",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "title_request_assignToTC",
      propName: "technician.loginName",
      propType: "String"
    }
  },
  {
    label: "组长",
    value: "owner.loginName",
    type: "select-user",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "common_owner",
      propName: "owner.loginName",
      propType: "String"
    }
  },
  {
    label: "创建时间",
    value: "createdOn",
    type: "select-time",
    way: "way4",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "common_createTime",
      propName: "createdOn",
      propType: "Data"
    }
  },
  {
    label: "完成时间",
    value: "closeTime",
    type: "select-time",
    way: "way4",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "title_sla_completeTime",
      propName: "closeTime",
      propType: "Data"
    }
  },
  {
    label: "服务目录",
    value: "serviceDirectory.eventId",
    type: "select-serviceDirectory",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "title_service_directory",
      propName: "serviceDirectory.eventId",
      propType: "Long"
    }
  },
  {
    label: "位置",
    value: "location.eventId",
    type: "select-location",
    way: "way3",
    formData: {
      displayOperator: "label_sla_eq",
      propDisplayName: "location",
      propName: "location.eventId",
      propType: "Long"
    }
  }
]);

const valueWay = ref("");

const way1List = reactive([
  {
    label: "包含",
    value: "in"
  },
  {
    label: "不包含",
    value: "not in"
  }
]);

const way2List = reactive([
  {
    label: "包含",
    value: "like"
  },
  {
    label: "不包含",
    value: "not like"
  }
]);

const way3List = reactive([
  {
    label: "等于",
    value: "="
  },
  {
    label: "不等于",
    value: "!="
  }
]);

const way4List = reactive([
  {
    label: "大于",
    value: ">"
  },
  {
    label: "大于等于",
    value: ">="
  },
  {
    label: "等于",
    value: "="
  },
  {
    label: "小于等于",
    value: "<="
  },
  {
    label: "小于",
    value: "<"
  }
]);

const allWayList = reactive([
  {
    label: "包含",
    value: "in"
  },
  {
    label: "不包含",
    value: "not in"
  },
  {
    label: "包含",
    value: "like"
  },
  {
    label: "不包含",
    value: "not like"
  },
  {
    label: "等于",
    value: "="
  },
  {
    label: "不等于",
    value: "!="
  },
  {
    label: "大于",
    value: ">"
  },
  {
    label: "大于等于",
    value: ">="
  },
  {
    label: "小于等于",
    value: "<="
  },
  {
    label: "小于",
    value: "<"
  }
]);

const checkWayText = (value: string) => {
  let text = "";
  allWayList.forEach(item => {
    if (item.value == value) {
      text = item.label;
    }
  });
  return text;
};

const valueType = ref("");

const propNameChange = (e: string) => {
  conditionForm.operator = "";
  conditionForm.propValue = "";
  conditionForm.propDisplayValue = "";
  nameList.forEach(item => {
    if (item.value == e) {
      valueType.value = item.type;
      valueWay.value = item.way;
      conditionForm.displayOperator = item.formData.displayOperator;
      conditionForm.propDisplayName = item.formData.propDisplayName;
      conditionForm.propName = item.formData.propName;
      conditionForm.propType = item.formData.propType;
    }
  });
};

// 输入框入值改变
const inputChange = (e: string) => {
  conditionForm.propDisplayValue = e;
};

// 改变选择值
const selectChange = (e: string | number) => {
  // 所属客户
  if (valueType.value == "select-companyNo") {
    orgList.value.forEach((item: { orgNo: any; orgName: string }) => {
      if (item.orgNo == e) {
        conditionForm.propDisplayValue = item.orgName;
      }
    });
    return;
  }
  // SLA状态
  if (valueType.value == "select-slaState") {
    slaStatusList.value.forEach(item => {
      if (item.id == e) {
        conditionForm.propDisplayValue = item.label;
      }
    });
    return;
  }
  // 状态
  if (valueType.value == "select-status") {
    statusList.value.forEach(item => {
      if (item.id == e) {
        conditionForm.propDisplayValue = item.label;
      }
    });
    return;
  }
  // 来源
  if (valueType.value == "select-imode") {
    imodeList.value.forEach(item => {
      if (item.dcode == e) {
        conditionForm.propDisplayValue = item.dname;
      }
    });
    return;
  }
  // 复杂度
  if (valueType.value == "select-level") {
    levelList.value.forEach(item => {
      if (item.dcode == e) {
        conditionForm.propDisplayValue = item.dname;
      }
    });
    return;
  }
  // 优先级
  if (valueType.value == "select-priority") {
    priorityList.value.forEach(item => {
      if (item.dcode == e) {
        conditionForm.propDisplayValue = item.dname;
      }
    });
    return;
  }
  // 紧急度
  if (valueType.value == "select-seriousness") {
    seriousnessList.value.forEach(item => {
      if (item.dcode == e) {
        conditionForm.propDisplayValue = item.dname;
      }
    });
    return;
  }
  // 影响范围
  if (valueType.value == "select-effectRange") {
    effectRangeList.value.forEach(item => {
      if (item.dcode == e) {
        conditionForm.propDisplayValue = item.dname;
      }
    });
    return;
  }
  // 位置
  if (valueType.value == "select-location") {
    positionList.value.forEach(item => {
      if (item.id == e) {
        conditionForm.propDisplayValue = item.cname;
      }
    });
    return;
  }
};

const cateTreeChange = e => {
  const data = findEmployeeById(cateList.value, e);
  conditionForm.propDisplayValue = data.label;
};

// 查询树中的某项
const findEmployeeById = (arr: any[], value: any) => {
  for (let item of arr) {
    if (item.value && item.value === value) {
      return item;
    }
    if (item.id && item.id === value) {
      return item;
    }
    if (item.children && Array.isArray(item.children)) {
      const result = findEmployeeById(item.children, value);
      if (result) {
        return result;
      }
    }
  }
  return null;
};

const selectDepartmentType = ref("");
const selectDepartmentTitle = ref("");
const selectDepartmentMask = ref();

const selectDepartment = (type: string, title: string) => {
  selectDepartmentType.value = type;
  selectDepartmentTitle.value = title;
  selectDepartmentMask.value?.open();
};

const departmentChange = e => {
  switch (selectDepartmentType.value) {
    case "filterForm.requestorOrgNo":
      requestorOrgName.value = e.orgName;
      filterForm.requestorOrgNo = e.orgNo;
      break;
    case "filterForm.assigneeGroupNo":
      assigneeGroupName.value = e.orgName;
      filterForm.assigneeGroupNo = e.orgNo;
      break;
    case "conditionForm.propValue":
      conditionForm.propDisplayValue = e.orgName;
      conditionForm.propValue = e.orgNo;
      break;
    default:
      break;
  }
};

// 选择时间
const dateChange = (e: string) => {
  conditionForm.propDisplayValue = e;
};

// 选择服务目录
const serviceDirectoryChange = (e: CascaderValue) => {
  let id = Array.isArray(e) ? e[e.length - 1] : e;
  let item = findEmployeeById(serviceList.value, id);
  if (item && item.id) {
    conditionForm.propDisplayValue = item.cname;
  }
};

const formartName = (value: string) => {
  let name = value;
  nameList.forEach(item => {
    if (item.value == value) {
      name = item.label;
    }
  });
  return name;
};

// 连接方式
const connectList = reactive([
  {
    label: "or",
    value: "or"
  },
  {
    label: "and",
    value: "and"
  }
]);
const editFilterChange = (e: any) => {
  if (e) {
    setFilterLoading.value = true;
    findFilterById(e)
      .then((res: any) => {
        setFilterLoading.value = false;
        for (const key in setFilterForm) {
          if (Object.prototype.hasOwnProperty.call(res, key)) {
            setFilterForm[key] = res[key];
          }
        }
        setFilterForm.expressions = res.expressions;
      })
      .catch(() => {
        setFilterLoading.value = false;
      });
  } else {
    // 清空所有
    for (const key in setFilterForm) {
      setFilterForm[key] = "";
    }
  }
};
// 添加查询条件
const addQueryCriteria = () => {
  if (!conditionForm.propName) {
    ElMessage.warning("请选择字段名称");
    return;
  }
  if (!conditionForm.operator) {
    ElMessage.warning("请选择查询方式");
    return;
  }
  if (!conditionForm.propValue) {
    ElMessage.warning("查询值不能为空");
    return;
  }
  let has_item = false;
  setFilterForm.expressions.forEach(item => {
    if (item.propName == conditionForm.propName) {
      has_item = true;
    }
  });
  if (has_item) {
    ElMessage.warning("条件已存在，不能重复加入同个条件！");
    return;
  }
  setFilterForm.expressions.push(JSON.parse(JSON.stringify(conditionForm)));
};
// 删除-查询条件
const delConnectItem = (index: number) => {
  ElMessageBox.confirm("确定要删除该查询条件？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(() => {
      setFilterForm.expressions.splice(index, 1);
    })
    .catch(() => {
      // cancel operation
    });
};
// 上移-查询条件
const connectItemMoveUp = (index: number) => {
  let pre_item = { ...setFilterForm.expressions[index - 1] };
  let current_item = { ...setFilterForm.expressions[index] };
  setFilterForm.expressions[index - 1] = current_item;
  setFilterForm.expressions[index] = pre_item;
};
// 下移-查询条件
const connectItemMoveDown = (index: number) => {
  let current_item = { ...setFilterForm.expressions[index] };
  let next_item = { ...setFilterForm.expressions[index + 1] };
  setFilterForm.expressions[index] = next_item;
  setFilterForm.expressions[index + 1] = current_item;
};

// 保存过滤器
const setFilterFormSubmit = () => {
  if (!setFilterForm.filterName) {
    ElMessage.warning("请输入过滤器名称");
    return false;
  }
  let data = {
    "customFilterDTO.userName": userStore.username,
    "customFilterDTO.filterCategory": "request",
    "customFilterDTO.entityClass": ""
  };
  for (const key in setFilterForm) {
    if (key != "expressions") {
      data["customFilterDTO." + key] = setFilterForm[key];
    }
  }
  setFilterForm.expressions.forEach((item, index) => {
    for (const key in item) {
      data["customFilterDTO.expressions[" + index + "]." + key] = item[key];
    }
  });
  setFilterLoading.value = true;
  if (setFilterForm.filterId) {
    // 编辑保存
    filterUpdate(data)
      .then(() => {
        setFilterLoading.value = false; // 关闭loading
        ElMessage.success("保存成功");
        setFilterMask.value = false; // 关闭弹窗
      })
      .catch(() => {
        setFilterLoading.value = false;
      });
  } else {
    // 新增保存
    saveFilter(data)
      .then(() => {
        setFilterLoading.value = false; // 关闭loading
        ElMessage.success("保存成功");
        setFilterMask.value = false; // 关闭弹窗
        // 刷新所有过滤器列表
        getFindCustomFilter();
      })
      .catch(() => {
        setFilterLoading.value = false;
      });
  }
};

// 删除过滤器
const delFilter = () => {
  ElMessageBox.confirm("确定要删除该过滤器？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(() => {
      setFilterLoading.value = true;
      deleteFilter(setFilterForm.filterId)
        .then(() => {
          setFilterLoading.value = false;
          ElMessage.success("删除成功");
          // 清空数据
          for (const key in setFilterForm) {
            if (key == "expressions") {
              setFilterForm[key] = [];
            } else {
              setFilterForm[key] = "";
            }
          }
          // 刷新所有过滤器列表
          getFindCustomFilter();
        })
        .catch(() => {
          setFilterLoading.value = false;
        });
    })
    .catch(() => {
      // cancel operation
    });
};

// 如果你想在请求之前对当前请求参数做一些操作
const getTableList = (params: any) => {
  // loading.value = true;
  let newParams = JSON.parse(JSON.stringify(params));
  console.log("yyyyyyyyyyyy");
  console.log(serchMy.value);
  console.log(curFullName.value);

  newParams.page = newParams.pageNum;
  newParams.rows = newParams.pageSize;
  newParams._search = false;
  newParams.sidx = "eno";
  newParams.sord = "desc";

  for (const key in form) {
    newParams[key] = form[key];
  }

  if (serchMy.value == true) {
    serchMy.value = false;
    newParams.createdByFullName = curFullName.value;
  }
  if (serchNo.value == true) {
    serchNo.value = false;
    newParams.assigneeGroupNo = curserchNoName.value;
  }
  if (unHandle.value == true) {
    unHandle.value = false;
    newParams.assigneeFullName = curFullName.value;
  }

  delete newParams.pageNum;
  delete newParams.pageSize;
  return findProblemPager(newParams, "queryDTO", ["_search", "sidx", "sord", "page", "rows"]);
};

watch(
  () => tabName.value,
  val => {
    refreshList(false);
  }
);

// dataCallback 是对于返回的表格数据做处理
const dataCallback = (data: any) => {
  loading.value = false;
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};

// 刷新
// const countData = ref({
//   countMyRquest: 0, // 我提出的请求个数
//   countMyPeRquest: 0, // 正在处理的请求个数
//   countMyIngHandleRequest: 0 // 指派给我的请求个数
// });

// const getCountRequest = () => {
//   countRequest({
//     "requestQueryDTO.loginName": userStore.username
//   }).then((res: any) => {
//     countData.value = res;
//   });
// };

const refreshList = (refresh: boolean) => {
  if (refresh) {
    isRefresh.value = true;
  }
  proTable.value?.getTableList();
  // getCountRequest();
};

const searchVisible = ref(false);

// 打开选择用户弹窗
const selectUserMask = ref();
const selectUserType = ref("");
const selectUser = (type: string) => {
  selectUserType.value = type;
  selectUserMask.value.open();
};

// 选择用户
const selectUserChange = (user: { userId: string | number; fullName: string }) => {
  console.log(user);
  if (selectUserType.value == "propValue") {
    conditionForm.propValue = user.userId;
    conditionForm.propDisplayValue = user.fullName;
    return;
  }
  filterForm[selectUserType.value] = user.fullName;
};

const search = () => {
  for (const key in form) {
    form[key] = filterForm[key] == undefined ? "" : filterForm[key];
  }
  if (form.serviceDirIds.length > 0) {
    form.serviceDirIds = form.serviceDirIds[form.serviceDirIds.length - 1];
  }

  isRefresh.value = true;
  isFilter.value = false; // 不走筛选器
  proTable.value?.getTableList();
  searchVisible.value = false;
};

// 重置搜索
const clearSearchData = () => {
  for (const key in form) {
    filterForm[key] = "";
  }

  requestorOrgName.value = "";
  filterForm.requestorOrgNo = "";
  assigneeGroupName.value = "";
  filterForm.assigneeGroupNo = "";
  dateTimeRange.value = [];
};

// 批量删除
const delSelectItem = (list: any[]) => {
  let str = "";
  let ids = list.map((item: { eno: any }) => {
    // if(str==""){
    //  str="ids="+ item.eno+"&"
    // }else{

    // }
    str = str + "ids=" + item.eno + "&";
    return item.eno;
  });
  ElMessageBox.confirm("确定要删除选中项？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(() => {
      loading.value = true;
      deleteProblem(str)
        .then(() => {
          loading.value = false;
          ElMessage.success("删除成功");
          proTable.value?.clearSelection();
          proTable.value?.getTableList();
        })
        .catch(() => {
          loading.value = false;
        });
    })
    .catch(() => {
      // cancel operation
    });
};

// 删除
const deleteItem = (item: { eno: any }) => {
  ElMessageBox.confirm("确定要删除该事件？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(() => {
      loading.value = true;
      deleteProblem({
        ids: item.eno
      })
        .then(() => {
          loading.value = false;
          ElMessage.success("删除成功");
          proTable.value?.getTableList();
        })
        .catch(() => {
          loading.value = false;
        });
    })
    .catch(() => {
      // cancel operation
    });
};

// 批量处理
const batchCloseVisible = ref(false);
const batchCloseForm = reactive({
  enos: "",
  requestCodes: "",
  remark: ""
});

const showBatchCloseMask = (list: any[]) => {
  let ids = ref<number[]>([]);
  let codes = ref<string[]>([]);
  list.forEach((item: ListItem) => {
    ids.value.push(item.eno);
    codes.value.push(item.requestCode);
  });
  batchCloseForm.enos = ids.value.join(",");
  batchCloseForm.requestCodes = codes.value.join(",");
  batchCloseForm.remark = "";
  batchCloseVisible.value = true;
};

const submitRequestBatchClose = () => {
  if (!batchCloseForm.remark) {
    ElMessage.warning("请输入备注");
    return false;
  }
  loading.value = true;
  requestBatchClose({
    "requestDTO.enos": batchCloseForm.enos,
    "requestDTO.requestCodes": batchCloseForm.requestCodes,
    "requestDTO.remark": batchCloseForm.remark
  })
    .then(() => {
      loading.value = false;
      ElMessage.success("批量操作成功");
      refreshList(false);
    })
    .catch(() => {
      loading.value = false;
    });
};

const curFullName = ref("");
const curserchNoName = ref("");

onMounted(() => {
  //编辑时加载数据
  let query = JSON.parse(JSON.stringify(route.query));
  // findByTemplateId findCiByIds
  if (query.type != undefined) {
    console.log("新增");
    addEventMask.value.open(null);
  }
  if (query.eno != undefined) {
    console.log("查看");
    detailsMask.value.open({ eno: query.eno });
    //addEventMask.value.open({eno:query.eno});
  }
  getFindCountRequest();
  getFindRequestFlotPieData_status();
  getFindRequestFlotPieData_priority();

  if (
    orgList.value.length == 0 ||
    cateList.value.length == 0 ||
    imodeList.value.length == 0 ||
    priorityList.value.length == 0 ||
    effectRangeList.value.length == 0 ||
    levelList.value.length == 0 ||
    seriousnessList.value.length == 0 ||
    positionList.value.length == 0 ||
    statusList.value.length == 0
  ) {
    allOptions.getAllOptions();
  }
  // getCountRequest();
  //加载用户数据
  getCurrentLoginUser().then(res => {
    let newres = JSON.parse(JSON.stringify(res));

    curFullName.value = newres.fullName;
    curserchNoName.value = newres.orgNo;
    console.log("sssssssss");
    console.log(curserchNoName);
  });
});
</script>

<style scoped>
.flex-row {
  display: flex;
}
.flex-row-center-center {
  display: flex;
  place-content: center center;
}
.text-center {
  text-align: center;
}
.flex-1 {
  flex: 1;
  overflow: hidden;
}
.flex-2 {
  flex: 2;
  overflow: hidden;
}
.flex-3 {
  flex: 3;
  overflow: hidden;
}
.flex-4 {
  flex: 4;
  overflow: hidden;
}
.flex-5 {
  flex: 5;
  overflow: hidden;
}
.filter-box {
  box-sizing: border-box;
  width: 24%;
  padding: 15px 0 18px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
  background-color: var(--el-menu-active-bg-color);
  background-size: 100% 100%;
  border-radius: 10px;
  transition: all 0.3s;
  .num {
    font-size: 20px;
    font-weight: bold;
    color: var(--el-color-primary);
  }
  .text {
    margin-top: 5px;
    font-size: 14px;
  }
}
</style>
